import React, { ReactNode } from 'react'
import Link from '../link'
import { AiOutlineRight } from 'react-icons/ai'
import Icon from '../icon'

interface Props {
  children: ReactNode
  prefix?: ReactNode
  moreUrl?: string
}
const heading = ({
  children,
  prefix,
  moreUrl
}: Props) => {
  return (
    <div className='flex justify-between items-center mb-heading-m-y md:mb-heading-m-y-md'>
      {prefix && <div>
        {prefix}
      </div>}
      <h2 className='h2'>{children}</h2>
      {moreUrl && <Link href={moreUrl} className='text-primary! flex justify-center'>更多 <Icon className='text-primary!' icon={AiOutlineRight} /></Link>}
    </div>
  )
}

export default heading